<template class="firstpage">
  <div>
    <div class="boxMargin">
      <el-card class="box-card">
        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">城市：</el-col>
              <el-col :span="14">
                <el-select placeholder="请选择">
                  <el-option />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">小区/区域：</el-col>
              <el-col :span="14">
                <el-select placeholder="请选择">
                  <el-option />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">门店名称：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.storeId" placeholder="请选择">
                  <el-option
                    v-for="task in customData.dropDownList"
                    :key="task.storeId"
                    :label="task.storeName"
                    :value="task.storeId"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">输入搜索：</el-col>
              <el-col :span="14">
                <el-input
                  v-model="searchData.orderNo"
                  placeholder="订单号/商品货号"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">提货人：</el-col>
              <el-col :span="14">
                <el-input
                  v-model="searchData.recvUserRealName"
                  placeholder="提货人姓名或手机号"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">下单时间：</el-col>
              <el-col :span="14">
                <el-date-picker
                  v-model="customData.orderCreateTime"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  @change="createTimeChange($event)"
                />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin">
          <el-col :span="24" class="right">
            <el-button type="success" @click="onSearch">查询</el-button>
            <el-button @click="onReset">清空</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="boxMargin">
      <el-card class="box-card">
        <div slot="header">
          <div class="contion-header" style="width: 10%">
            <span>订单列表</span>
          </div>
          <div class="contion-header">
            <el-button
              v-for="(i, index) in list"
              :key="index"
              :type="primary === index ? 'primary' : ''"
              @click="primaryClick(index)"
            >{{ i.name + "(" + i.value + ")" }}</el-button>
          </div>
          <div class="contion-header text-r" style="width: 89%">
            <!-- <el-button type="primary">导出订单</el-button> -->
          </div>
        </div>
        <div>
          <el-table
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{'background':'#f8f8f9'}"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="plateSource" label="订单来源">
              <template slot-scope="scope">
                <span v-if="scope.row.plateSource === 1">城市运营订单</span>
                <span v-if="scope.row.plateSource === 2">自营订单</span>
                <span v-if="scope.row.plateSource === 3">租赁平台工业商城订单</span>
              </template>
            </el-table-column>
            <el-table-column prop="platformHouseName" label="小区/区域" />
            <el-table-column prop="provinceName" label="省" />
            <el-table-column prop="cityName" label="城市" />
            <el-table-column prop="storeName" label="门店名称" />
            <el-table-column prop="orderNo" label="订单编号" />
            <el-table-column prop="orderCreateTime" label="下单时间" />
            <el-table-column prop="userAccount" label="用户账号" />
            <el-table-column prop="totalPriceDouble" label="订单金额(元)" />
            <el-table-column prop="payStatus" label="支付方式">
              <template slot-scope="scope">
                <span v-if="scope.row.payStatus === 0">未支付</span>
                <span v-if="scope.row.payStatus === 1">已支付</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态">
              <template slot-scope="scope">
                <span>{{ orderStatusFn(scope.row) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="onInfo(scope.row)"
                >查看</el-button>
                <!-- <el-button type="text" @click="onUpdate(scope.row)"
                  >完成</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div class="marginTop20 center">
      <template>
        <PAGER ref="wptxPager" @search="onChangePage" />
      </template>
    </div>
    <div>
      <DETAILS ref="orderDetails" />
    </div>
  </div>
</template>
<script>
import _validate from '../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../framework/commonJs/wptx_tools'
import _api from '@/framework/API/order'
import DETAILS from './orderCrud/order_details.vue'
import { reportingVideo } from '../../../../framework/API/excel'
import { PAGER } from '@/framework/commonTemplate/'
import _orderStatus from './orderStatus'

const _FUNCTION_NAME = ''
export default {
  components: { PAGER, DETAILS },
  data() {
    return {
      primary: 0,
      list: [
        {
          name: '全部订单',
          value: 100
        },
        {
          name: '待付款',
          value: 20
        },
        {
          name: '待提货',
          value: 30
        },
        {
          name: '已完成',
          value: 10
        },
        {
          name: '已关闭',
          value: 40
        }
      ],
      tableData: [],
      searchData: {
        // userId: 1,
        // payStatus: 0,
        // orderStatus: 0,
        // plateSource: 1,
        storeId: '',
        orderNo: '',
        recvUserRealName: '',
        orderCreateTime: ''
      },
      searchDataBuffer: {
        userId: 1,
        payStatus: 0,
        orderStatus: 0,
        plateSource: 1,
        storeId: '',
        orderNo: '',
        recvUserRealName: '',
        orderCreateTime: ''
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        multipleSelection: [],
        createTime: [],
        editTitle: '',
        editVideo: false,
        detailVideo: false,
        status: '',
        commodities: false,
        commoditiesDate: [],
        commodValue: {
          videoId: ''
        },
        dropDownList: []
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.dropDownList()
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    primaryClick(index) {
      const self = this
      self.primary = index
    },
    onInit(data) {
      const self = this
      _api.orderInfoPage(self, self.$refs.wptxPager.pageData, self.callBack_pageDesc, self.searchData)
    },
    onSearch() {
      const self = this
      const params = self.searchData
      self.searchDataBuffer = _tools.cloneObj(self.searchData)
      self.$refs.wptxPager.resetPageNo()
      _api.orderInfoPage(self, self.$refs.wptxPager.pageData, self.callBack_pageDesc, params)
    },
    onChangePage(data) {
      const self = this
      const params = self.searchDataBuffer
      _api.orderInfoPage(self, self.$refs.wptxPager.pageData, self.callBack_pageDesc, params)
    },
    onReset(data) {
      const self = this
      _tools.reset(self.searchData)
      _tools.reset(self.searchDataBuffer)
      self.customData.createTime = []
      self.onInit()
    },
    onInfo(data) {
      const self = this
      self.$refs.orderDetails.show({ ...data })
    },
    onUpdate(data) {
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_pageDesc(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.tableData = data.result
        self.$refs.wptxPager.updatePageData(data)
      }
    },
    callBack_create(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _validate.openTip(self, '创建成功', 'success')
        self.customData.editVideo = false
        self.onChangePage()
      }
    },
    callBack_detail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        if (self.customData.status === '1') {
          self.customData.detailVideo = true
          self.$nextTick(function() {
            if (_validate.checkEmpty(data.data.uploadId)) {
              self.customData.status = '11'
            }
            self.form = data.data
          })
        } else if (self.customData.status === '2') {
          self.customData.editVideo = true
          self.customData.editTitle = '视频编辑'
          self.$nextTick(function() {
            if (_validate.checkEmpty(data.data.uploadId)) {
              self.customData.status = '22'
            }
            self.form = data.data
            self.$refs['form'].clearValidate()
          })
        }
      }
    },
    callBack_update(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _validate.openTip(self, '编辑成功', 'success')
        self.customData.editVideo = false
        self.onChangePage()
      }
    },
    callBack_dropDownList(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.customData.dropDownList = data.data
      }
    },
    callBack_delete(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _validate.openTip(self, '删除成功', 'success')
        self.onChangePage()
      }
    },
    handleSelectionChange(val) {
      this.customData.multipleSelection = val
    },
    createTimeChange(value) {
      const self = this
      if (value == '') {
        self.searchData.fstartCreateTime = ''
        self.searchData.fendCreateTime = ''
      } else {
        self.searchData.fstartCreateTime = value[0]
        self.searchData.fendCreateTime = value[1]
      }
    },
    commodItem(data) {
      const self = this
      self.customData.commodities = true
      self.customData.commodValue.videoId = data.videoId
      self.commodChange()
    },
    commodChange() {
      const self = this
      const params = {
        pageNo: self.pageData.pageNo,
        pageSize: self.pageData.pageSize
      }
      _api.pageItem(self, params, self.callBack_pageItem, self.customData.commodValue)
    },
    // 分页
    handleSizeChange(val) {
      const self = this
      self.pageData.pageNo = 1
      self.pageData.pageSize = val
      self.commodChange()
    },
    handleCurrentChange(val) {
      const self = this
      self.pageData.pageNo = val
      self.commodChange()
    },
    report() {
      const self = this
      const params = self.searchData
      // params.isSam = 1
      const time = _tools.getTime()
      const title = 'video_' + time + '.xlsx'
      reportingVideo(params).then(res => {
        if (!_validate.checkEmpty(res.data)) {
          _validate.downloadNotFileName(res, title)
        }
      }).catch(error => {
      })
    },
    dropDownList() {
      const self = this
      const params = {}
      _api.dropDownUpdate(self, params, self.callBack_dropDownList)
    },
    // 订单状态转化
    orderStatusFn(row) {
      const orderStatusText = _orderStatus.orderStatusTextFn(row)
      return orderStatusText
    }
  }
}
</script>
<style scoped>
.contion-header {
  display: inline-block;
  box-sizing: border-box;
}
.text-r {
  text-align: right;
}
.dece {
  line-height: 20px;
  margin-top: 20px;
}
.dece p {
  padding: 0;
  margin: 0;
  color: #d9001b;
}
</style>
